<template>
  <!-- 登录界面 -->
  <div>
    <!-- 头部 -->
    <van-nav-bar @click-left="onClickLeft">
      <template #left>
        <van-icon name="cross" />
      </template>
    </van-nav-bar>
    <!-- 登录方式：手机号登录，密码登录，手机号登录时若无记录，默认注册 -->
    <!-- 手机号登录 -->
    <div v-if="sss==0">
      <van-row>
        <van-col :span="22" :offset="1">
          <h1>手机号登录</h1>
        </van-col>
      </van-row>
      <van-field v-model="tel" type="tel" maxlength="11" :formatter="formatter" placeholder="请输入手机号"
        :error-message="error" clearable @blur="tel_ce1" @focus="qin" />
      <van-field v-model="sms" center clearable maxlength="6" :formatter="formatter" placeholder="请输入验证码"
        :error-message="error1" @blur="sms_ce" @focus="qin1">
        <template v-if="sss==0" #button>
          <van-button size="small" type="primary" @click="yanzeng">发送验证码</van-button>
        </template>
      </van-field>
      <van-row>
        <van-col :span="22" :offset="1">
          <div class="change_login" @click="to_change_login">用账号密码登录 ></div>
          <van-button type="primary" block @click="login1">登录</van-button>
        </van-col>
      </van-row>
    </div>
    <!-- 密码登录 -->
    <div v-else>
      <van-row>
        <van-col :span="22" :offset="1">
          <h1>密码登录</h1>
        </van-col>
      </van-row>

      <van-field v-model="tel" type="text" placeholder="请输入手机号/邮箱/小米账号" :error-message="error" clearable @blur="tel_ce2"
        @focus="qin" />
      <van-field v-model="pass" type="password" center clearable placeholder="请输入密码" :error-message="error1"
        @blur="pass_ce" @focus="qin1"></van-field>

      <van-row>
        <van-col :span="22" :offset="1">
          <div class="change_login" @click="to_change_login">用手机号登录 ></div>
          <van-button type="primary" block @click="login2">登录</van-button>
        </van-col>
      </van-row>
    </div>

    <van-row>
      <van-col :span="22" :offset="1">
        <p class="xieyi">已阅读同意<a href="">《小米商城用户协议》《小米商城隐私协议》《小米账号用户协议》《小米账号隐私政策》</a></p>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      sss: 0,
      tel: "15839740567",
      error: "",
      error1: "",
      sms: "",
      pass: "013698",
    };
  },
  methods: {
    //返回上一级
    onClickLeft() {
      this.$router.go(-1);
    },
    //过滤只能的数字
    formatter(value) {
      return value.replace(/[^0123456789]/g, "");
    },
    //切换登录方式发送数据
    to_change_login() {
      if (this.sss == 1) {
        this.sss = 0;
      } else {
        this.sss = 1;
      }
    },
    //验证码自动生成
    yanzeng() {
      let randomNum = ("000000" + Math.floor(Math.random() * 999999)).slice(-6);
      this.sms = randomNum;
      this.error1 = "";
    },
    //手机号输入错误提示
    tel_ce1() {
      let reg1 = /^[1][\d]{10}$/;
      if (this.tel == "") {
        this.error = "请输入手机号";
      } else if (!reg1.test(this.tel)) {
        this.error = "请输入正确的手机号";
      } else {
        this.error = "";
      }
    },
    //验证码输入错误提示
    sms_ce() {
      if (this.sms == "") {
        this.error1 = "请输入验证码";
      }
    },
    //手机号错误提示清空
    qin() {
      this.error = "";
    },
    //验证码错误提示清空
    qin1() {
      this.error1 = "";
    },
    //用户表中手机号存在时登录 不存在时注册

    login1() {
      let reg1 = /^[1][\d]{10}$/;
      if (this.sms == "") {
        this.$toast("请输入验证");
      } else if (!reg1.test(this.tel)) {
        this.$toast("请输入正确的手机号");
      } else {
        let myurl = this.$url + "user_login";
        this.axios.post(myurl, { user: this.tel }).then(
          (res) => {
            console.log(res);
            if (res.data.data == "[]") {
              let myurl1 = this.$url + "user_register";
              let data = {
                name: this.tel,
                user_name: this.tel,
                password: this.sms,
                PaymentPassword: "",
                Email: "",
                phone: this.tel,
                gender: "男",
                birthday: "",
                img: "",
              };
              this.axios.post(myurl1, { data: data }).then(
                (res1) => {
                  this.$toast.success("注册成功");
                  let sta = {
                    sx: 1,
                    tel: this.tel,
                    id: JSON.parse(res1.data.data).insertId,
                  };
                  sta = JSON.stringify(sta);
                  localStorage.setItem("sta", sta);
                  let address = { sx: 0 };
                  address = JSON.stringify(address);
                  localStorage.setItem("address", address);
                  this.$router.go(-1);
                },
                (err) => {
                  console.log("数据读取失败");
                  console.log(err);
                }
              );
            } else {
              this.$toast.success("登录成功");
              let sta = {
                sx: 1,
                tel: this.tel,
                id: JSON.parse(res.data.data)[0].id,
              };
              sta = JSON.stringify(sta);
              localStorage.setItem("sta", sta);
              let myurl1 = this.$url + "address_read";
              this.axios
                .post(myurl1, { user_id: JSON.parse(res.data.data)[0].id })
                .then(
                  (res1) => {
                    let b = res1.data.data;
                    b = b.replace(/"false"/g, "false");
                    b = b.replace(/"true"/g, "true");
                    let data_base = JSON.parse(b);
                    for (let i = 0; i < data_base.length; i++) {
                      if (data_base[i].isDefault == true) {
                        let address = {
                          sx: 1,
                          id: data_base[i].id,
                        };
                        address = JSON.stringify(address);
                        localStorage.setItem("address", address);
                        break;
                      } else {
                        let address = {
                          sx: 1,
                          id: data_base[i].id,
                        };
                        address = JSON.stringify(address);
                        localStorage.setItem("address", address);
                      }
                    }
                  },
                  (err) => {
                    console.log("数据读取失败");
                    console.log(err);
                  }
                );
              this.$router.go(-1);
            }
          },
          (err) => {
            console.log("数据读取失败");
            console.log(err);
          }
        );
      }
    },
    //手机号输入错误提示
    tel_ce2() {
      let reg1 = /^[\W\da-zA-Z_]{6,20}$/;
      if (this.tel == "") {
        this.error = "请输入账号";
      } else if (!reg1.test(this.tel)) {
        this.error = "请输入正确的账号格式";
      } else {
        this.error = "";
      }
    },
    //密码输入错误提示
    pass_ce() {
      if (this.pass == "") {
        this.error1 = "请输入密码";
      }
    },
    //登录
    login2() {
      if (this.error == "" && this.error1 == "") {
        let myurl = this.$url + "user_login";
        this.axios.post(myurl, { user: this.tel }).then(
          (res) => {
            if (res.data.data == "[]") {
              this.$toast.fail("用户名或密码错误");
            } else if (JSON.parse(res.data.data)[0].password == this.pass) {
              this.$toast.success("登录成功");
              console.log(res.data.data);
              let sta = {
                sx: 1,
                tel: this.tel,
                id: JSON.parse(res.data.data)[0].id,
              };
              sta = JSON.stringify(sta);
              localStorage.setItem("sta", sta);

              let myurl1 = this.$url + "address_read";
              this.axios
                .post(myurl1, { user_id: JSON.parse(res.data.data)[0].id })
                .then(
                  (res1) => {
                    let b = res1.data.data;
                    b = b.replace(/"false"/g, "false");
                    b = b.replace(/"true"/g, "true");
                    let data_base = JSON.parse(b);
                    for (let i = 0; i < data_base.length; i++) {
                      if (data_base[i].isDefault == true) {
                        let address = {
                          sx: 1,
                          id: data_base[i].id,
                        };
                        address = JSON.stringify(address);
                        localStorage.setItem("address", address);
                        break;
                      } else {
                        let address = {
                          sx: 1,
                          id: data_base[i].id,
                        };
                        address = JSON.stringify(address);
                        localStorage.setItem("address", address);
                      }
                    }
                  },
                  (err) => {
                    console.log("数据读取失败");
                    console.log(err);
                  }
                );
              this.$router.go(-1);
            } else {
              this.$toast.fail("用户名或密码错误");
            }
          },
          (err) => {
            console.log("数据读取失败");
            console.log(err);
          }
        );
      }
    },
  },
};
</script>

<style scoped>
.change_login {
  margin: 40px 0px;
  font-size: 14px;
  color: #969799;
}
.xieyi {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.3);
}
</style>
